<template>
	<view class="login">
		<view class="login-title">
			<!-- <image src="../../static/img/login_img.png" mode="widthFix"></image> -->
		</view>
		<view class="login-info">
			<u-form ref="uForm" :model="form">

				<u-form-item label-width="0" :border-bottom="false" prop="username">
					<view class="field-item">
						<input class="uni-input" v-model="form.username" style="color:#fff;" placeholder="请输入账号" placeholder-style="font-size:28rpx;color:rgba(255,255,255,1);" />
					</view>
				</u-form-item>

				<u-form-item label-width="0" :border-bottom="false" prop="passsword">
					<view class="field-item">

						<input class="uni-input" v-model="form.passsword" type="password" placeholder="请输入密码" style="color:#fff;"
						 placeholder-style="font-size:28rpx;color:rgba(255,255,255,1);" />

					</view>
				</u-form-item>
			</u-form>
		</view>
		<button @click="submit" class="register-btn">登录</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					passsword: "",
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户',
						trigger: ['blur'],
					}],
					passsword: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100% !important;

	}

	.login {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(141deg, #08cafc 0%, #3584d8 75%);
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.login-title {
		margin: 0 auto;
		padding: 50rpx 0;
		width: 362rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-title image {
		width: 176rpx;
		height: 176rpx;
	}

	.login-info {
		width: 86%;
		padding: 40rpx;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.uni-form-item .title {
		font-size: 30rpx;
		color: rgba(255, 255, 255, .7);
	}

	.field-item {
		padding: 20rpx 0;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.7);
	}

	.uni-form-item .uni-input {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .5);
		height: 80rpx;
		margin-bottom: 42rpx;
		color: rgba(255, 255, 255, .7);
	}

	.register-btn {
		width: 86%;
		margin: 10rpx auto;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 100rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.radio {
		font-size: 26rpx;
		color: rgba(255, 255, 255, .7);

	}

	.radio>radio {
		transform: scale(.7);
		vertical-align: middle;
		margin-bottom: 5rpx;
	}

	.uni-radio .uni-radio-input {
		border-radius: 50%;
		border: 1rpx solid #007AFF;
	}

	.register-bar {
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		margin-top: 30rpx;
	}

	.uni-form-item .uni-input:last-child {
		margin-bottom: 10rpx !important;
	}
</style>
